<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .leftTiyle {
            font-size: 25px;
            padding-left: 30px;
            font-weight: 600;
            color: #545454;
            float: left;
        }

        .top {
            width: 100%;
            float: left;
            height: 100px;
            line-height: 100px;
            border-bottom: 1px solid #b0cdff;
        }

        .thisUser {
            float: right;
            margin-right: 30px;
        }

        #demo4 {
            text-align: center;
        }

        .tt {
            width: 100px;
            height: 20px;
            float: right;
            margin-right: 30px;
        }

        .ssa {
            margin-top: 10px;
        }

        /* 搜索框 */
        .search {
            width: 40%;
            margin: 0 auto;
            display: flex;
            /*border: 1px solid red;*/
        }

        .search input {
            float: left;
            flex: 4;
            height: 30px;
            outline: none;
            border: 1px solid red;
            box-sizing: border-box;
            padding-left: 10px;
        }

        .search button {
            float: right;
            flex: 1;
            height: 30px;
            background-color: red;
            color: white;
            border-style: none;
            outline: none;
        }

        .search button i {
            font-style: normal;
        }

        .search button:hover {
            font-size: 16px;
        }
        .box { margin:20px 0;
            position: absolute;
            left: 600px;
            top: 500px;

        }
        .box a{
            padding: 5px;
            border: 1px solid blue;
            margin:3px;
            text-decoration: none;
            border-radius: 5px;
        }
        .box a.high {
            background-color: #007DDB;
        }
        #sx{
            position: absolute;
            left: 0px;
            top: 480px;
        }
        #demo7{
            position: absolute;
            left: 0px;
            top: 450px;
        }
    </style>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/layui/layui.js}"></script>
    <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}">
</head>

<body>
<div class="top">
    <div class="leftTiyle" id="flTitle" style="color: gray">用户管理</div>
    <div class="thisUser"></div>
</div>
<hr style="background-color: white;">
<div class="search">
    <select id="typeName" lay-verify="" name="typeName" style=" width: 50px">
        <option>ID</option>
        <option th:each="obj: ${list}" th:text="${obj.id}"></option>
    </select>
    <input class="cver" name="username" placeholder="请输入用户账号查询.." type="text" value="" />
<!--    <form action="/show" method="post">-->
    <button class="searchbt" style="width: 50px;height: 30px;" type="submit"><i class="layui-icon layui-icon-search" style="width: 50px; height: 30px;"></i></button>
<!--    </form>-->
</div>

<table class="layui-table">
    <thead>
    <tr>
        <th>用户ID</th>
        <th>用户名</th>
        <th>用户账号</th>
        <th>用户密码</th>
        <th>角色</th>
        <th>用户电话</th>
        <th>创建时间</th>
        <th>账号状态</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody class="dcnvw">
    <i class="sytf">
    <tr th:each="h ,v: ${info.list}">
        <td th:text="${h.id}"></td>
        <td th:text="${h.yhusername}"></td>
        <td th:text="${h.username}"></td>
        <td th:text="${h.password}"></td>
        <td th:text="${h.role}"></td>
        <td th:text="${h.telephone}"></td>
        <td th:text="${#dates.format(h.createtime,'yyyy-MM-dd')}"></td>
        <td th:text="${h.conferred}" th:value="${h.conferred}"  class="sf"></td>
        <td>
            <div class="layui-btn-group">
                <i class="btn1" th:value="${h.id}" name="id">
                <button class="layui-btn layui-btn-primary layui-btn-sm"  th:value="${h.id}" type="button">
                    <i class="layui-icon">&#xe642;</i>
                </button>
                </i>
                <i th:if="${h.conferred==1}" class="btn3" th:value="${h.id}">
                    <button style="display: none" class="layui-btn layui-btn-primary layui-btn-sm" type="button">
                        <i class="layui-icon">&#xe673;</i>
                    </button>
                    <button  th:value="${h.id}" type="button"  class="layui-btn layui-btn-primary layui-btn-sm">
                        <i><img th:src="@{'/img/JiXeiShu/'+suozhu.png}" style="width: 20px;height: 20px;"></i>
                    </button>
                </i>
                <i class="btn2" th:if="${h.conferred!=1}" th:value="${h.id}" >
                    <button style="display: none" th:value="${h.id}" type="button"  class="layui-btn layui-btn-primary layui-btn-sm">
                        <i><img th:src="@{'/img/JiXeiShu/'+suozhu.png}" style="width: 20px;height: 20px;"></i>
                    </button>
                    <button class="layui-btn layui-btn-primary layui-btn-sm" type="button">
                        <i class="layui-icon">&#xe673;</i>
                    </button>
                </i>
                <i class="yhsc" th:value="${h.id}" id="sc" name="spsc">
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">
                        <i class="layui-icon">&#xe640;</i>
                    </button>
                </i>
            </div>
        </td>
    </tr>
    </i>


<div class="box">
    <a href="1">首页</a>
    <a th:class="${ p==info.pageNum ? 'high' : ''}"
       th:each="p : ${info.navigatepageNums}"
       th:href="${p}"
       th:text="${p}">1</a>
    <a th:href="${info.pages}">尾页</a>
</div>

<div hidden id="demo7">
<!--    <form action="/yhxiugai/1" method="post">-->
        用户名<input type="text" name="name" id="name">
        用户账号<input type="text" name="zhanghao" id="zhanghao">
        用户密码<input type="text" name="mm" id="mm">
        角色<select name="js" id="js">
                <option>0</option>
                <option>1</option>
            </select>
        账号状态<input type="text" name="zt" id="zt">
        <button type="button" class="dianji">修改用户</button>
<!--    </form>-->
</div>
    </tbody>
</table>

<input type=button value="刷新" onclick="location.reload()" class="layui-btn layui-btn-sm" id="sx">
</body>
<script>
        // $(".btn1").click(function (){
        //     $("#demo7").show();
        //     var id=$(this).attr("value")
        //     alert(id);
        //     var data = {"id": id};
        //     $.ajax({
        //         url: "/yhidcx",
        //         type: "post",
        //         contentType:'application/json',
        //         data:JSON.stringify(data),
        //         success: function (obj) {
        //             $("#name").val(obj.data.yhusername);
        //             $("#zhanghao").val(obj.data.username);
        //             $("#mm").val(obj.data.password);
        //             $("#js").val(obj.data.role);
        //             $("#zt").val(obj.data.conferred);
        //         }
        //     });
        // })



        // <%--    修改    --%>
        var yhid;
        // $("div").delegate(".btn1","click",function (){
            $("tbody").on('click','.btn1',function(){
            $("#demo7").show();
            console.log($(this).attr("value"));
            yhid=$(this).attr("value")
            // alert(yhid);
        });
        //用户修改
        $(".dianji").click(function () {
        // $("tbody").on('click','.dianji',function(){
        //     alert(1);
            // alert(yhid);
            var yhm = $("#name").val();
            var yhzh = $("#zhanghao").val();
            var yhmm = $("#mm").val();
            var js = $("#js").val();
            var zt = $("#zt").val();
            console.log("修改" + yhm + "\t" + yhzh + "\t" + yhmm + "\t" + js + "\t" + zt + "\t" + yhid);
            var data = {
                "yhusername": yhm, "username": yhzh, "password": yhmm, "role": js,
                "conferred": zt, "id": yhid};
            $.ajax({
                url: "/yhxiugai",
                type: "post",
                contentType:'application/json',
                data:JSON.stringify(data),
                success: function (obj) {
                    if (obj == 1) {
                        alert("修改成功");
                        $("#demo7").hide();

                    } else if (obj==0) {
                        alert("修改失败")
                    }
                }
            });
        });


        //封号功能
        // $(".btn2").click(function () {
            $("tbody").on('click','.btn2',function(){
            var sf=$(this).attr("value");
            var data = {"id": sf, "conferred": 1};
            $.ajax({
                url: "/yhfhguanli",
                type: "post",
                contentType:'application/json',
                data:JSON.stringify(data),
                success: function (obj) {
                    if (obj == 1) {
                        alert("封号成功");
                        $(".btn3").show()
                        $(this).hide();
                    } else if (obj==0) {
                        alert("封号失败")
                    }
                }
            });
        });
        //解锁功能
        // $(".btn3").click(function () {
            $("tbody").on('click','.btn3',function(){
            var sf=$(this).attr("value");
            var data = {"id": sf, "conferred": 0};
            $.ajax({
                url: "/yhfhguanlikai",
                type: "post",
                contentType:'application/json',
                data:JSON.stringify(data),
                success: function (obj) {
                    if (obj == 1) {
                        alert("解锁成功");
                        $(".btn2").show()
                        $(this).hide();
                    } else if (obj==0) {
                        alert("解锁失败")
                    }
                }
            });
        });
        //用户删除
        // $(".yhsc").click(function () {
            $("tbody").on('click','.yhsc',function(){
            var yhid=$(this).attr("value");
            console.log("删除"+yhid)
            var data = {"id": yhid};
            $.ajax({
                url: "/yhsc",
                type: "post",
                contentType:'application/json',
                data:JSON.stringify(data),
                success: function (obj) {
                    if (obj == 1) {
                        alert("删除成功");
                    } else if (obj==0) {
                        alert("删除失败")
                    }
                }
            });
        });

        //按id查询

        $(function(){
            $("#typeName").change(function(){
                var t = $(this).val();
                // alert(t)
                //button点击事件
                $(".searchbt").click(function (){
                    alert(t)
                    var data = {"id": t};
                    $.ajax({
                        url: "/show",
                        type: "post",
                        contentType:'application/json',
                        data:JSON.stringify(data),
                        success : function(obj) {
                            $(".dcnvw").empty();
                            console.log(obj.data);
                            for(var i = 0; i < obj.data.length; i++) {
                                var bj =("<tr>"+"<td>"+ obj.data[i].id  + "</td>"+
                                    "<td>"+obj.data[i].yhusername  +"</td>"+
                                    "<td>"+obj.data[i].username  +"</td>"+
                                    "<td>"+obj.data[i].password  +"</td>"+
                                    "<td>"+obj.data[i].role+"</td>"+
                                    "<td>"+obj.data[i].telephone  +"</td>"+
                                    "<td>"+obj.data[i].createtime+"</td>"+
                                    "<td>"+obj.data[i].conferred +"</td>"+
                                    "<td>"+"<div class=\"layui-btn-group\">\n" +
                                    "                <i class=\"btn1\" value='"+obj.data[i].id+"'  name=\"id\">\n" +
                                    "                <button class=\"layui-btn layui-btn-primary layui-btn-sm\"  th:value=\"${h.id}\" type=\"button\">\n" +
                                    "                    <i class=\"layui-icon\">&#xe642;</i>\n" +
                                    "                </button>\n" +
                                    "                </i>\n" +
                                    "                <i class=\"yhsc\" value='"+obj.data[i].id+"'>\n" +
                                    "                   <button class=\"layui-btn layui-btn-primary layui-btn-sm\" type=\"button\">\n" +
                                    "                    <i class=\"layui-icon\">&#xe640;</i>\n" +
                                    "                   </button>\n" +
                                    "                </i>\n" +
                                    "            </div>"+"</td>"+"</tr>");
                                    $(".dcnvw").append(bj);
                            }
                        },
                        "error": function() {
                            alert("查询失败....")
                        }
                    });
                })
            })
        });
        //用户用账号查询
        $(".searchbt").click(function (){
            var zh=$(".cver").val();
            // alert(zh);
            var data = {"username": zh};
            $.ajax({
                url: "/yhzhcx",
                type: "post",
                contentType:'application/json',
                data:JSON.stringify(data),
                success : function(obj) {
                    $(".dcnvw").empty();
                    console.log(obj.data);
                    for(var i = 0; i < obj.data.length; i++) {
                        var bj =("<tr>"+"<td>"+ obj.data[i].id  + "</td>"+
                            "<td>"+obj.data[i].yhusername  +"</td>"+
                            "<td>"+obj.data[i].username  +"</td>"+
                            "<td>"+obj.data[i].password  +"</td>"+
                            "<td>"+obj.data[i].role+"</td>"+
                            "<td>"+obj.data[i].telephone  +"</td>"+
                            "<td>"+obj.data[i].createtime+"</td>"+
                            "<td>"+obj.data[i].conferred +"</td>"+
                            "<td>"+"<div class=\"layui-btn-group\">\n" +
                            "                <i class=\"btn1\" value='"+obj.data[i].id+"'  name=\"id\">\n" +
                            "                <button class=\"layui-btn layui-btn-primary layui-btn-sm\"  th:value=\"${h.id}\" type=\"button\">\n" +
                            "                    <i class=\"layui-icon\">&#xe642;</i>\n" +
                            "                </button>\n" +
                            "                     </i>\n" +
                            "                <i class=\"yhsc\" value='"+obj.data[i].id+"'>\n" +
                            "                   <button class=\"layui-btn layui-btn-primary layui-btn-sm\" type=\"button\">\n" +
                            "                    <i class=\"layui-icon\">&#xe640;</i>\n" +
                            "                   </button>\n" +
                            "                </i>\n" +
                            "            </div>"+"</td>"+"</tr>");
                        $(".dcnvw").append(bj);
                    }
                },
                "error": function() {
                    alert("查询失败....")
                }
            });

        })









</script>
</html>